<template>
  <div class="topBox">
    <div class="L"><a href="index.html">LOGO</a></div>
    <div class="R">
      <router-link to="/map/index"><img src="/assets/images/map.png">
      </router-link>
    </div>
  </div>
  <!-- 轮播图 -->
  <van-swipe :autoplay="3000" lazy-render>
    <van-swipe-item v-for="item in hostlist" :key="item.id">
      <van-image height="220" width="100%" :src="item.thumbs_text" fit="cover" />
    </van-swipe-item>
  </van-swipe>
  <div class="clear"></div>
  <div class="lqgwBox">
    <ul>
      <li><router-link to="/product/index"><img src="/assets/images/quanbu.png">
          <p>全部商品</p>
        </router-link></li>
      <li><a href="live.html"><img src="/assets/images/zibo.png">
          <p>商品直播</p>
        </a></li>
      <li><router-link to="/coupon/index"><img src="/assets/images/youhui.png">
          <p>优惠活动</p>
        </router-link></li>
      <li><a href="ranking.html"><img src="/assets/images/bandan.png">
          <p>榜单排行</p>
        </a></li>
    </ul>
  </div>
  <div class="clear"></div>
  <div class="contitbox">
    <p>新品<span>•</span>推荐</p>
  </div>
  <div class="clear"></div>
  <ul class="proul">
    <li v-for="item in newlist" :key="item.id">
      <div class="con">
        <router-link :to="{ path: '/product/info', query: { proid: item.id } }">
          <img :src="item.thumbs_text">
          <p><span>￥</span>{{ item.price }}</p>
        </router-link>
      </div>
    </li>
  </ul>
  <div class="clear"></div>
  <div class="h54"></div>
  <div class="clear"></div>
  <Footer />
</template>
<script setup>
import Footer from '@/components/common/footer.vue';
const hostlist = ref([])
const newlist = ref([])
onBeforeMount(() => {
  getHomeData()
})
const getHomeData = async () => {
  let result = await Api.ProductIndex()
  if (result.code == 1) {
    hostlist.value = result.data.hostlist
    newlist.value = result.data.newlist
  }
}
</script>
